<template>
  <div class="goods-detail">
    <!--图片轮播-->
    <van-swipe :autoplay="3000">
       <van-swipe-item v-for="(img,i) in carouselList" :key="i">
         <van-image width="80%" :src="img.imgurl"></van-image>
       </van-swipe-item>
    </van-swipe>
     <!--图片轮播结束-->
     <!--商品明细-->
     <van-cell title="商品编号" :value="goods.goodid"></van-cell>
     <van-cell title="商品名称" :label="goods.goodname"></van-cell>
     <van-cell title="商品规格" :label="goods.spec"></van-cell>
     <van-cell title="单价" :label="goods.price"></van-cell>
     <van-cell title="库存数量" :label="goods.cnt"></van-cell>
     <van-cell title="上架时间" :label="goods.addtime"></van-cell>
     <!--商品明细结束-->
     <!--商品购买区域-->
    <van-cell title="购买数量">
       <template #label>
         <div class="count-buy">
           <van-stepper v-model="count" integer :max="goods.cnt"></van-stepper><!--购买数量-->
          <van-button type="primary" size="small" @click="addToCar(goods.goodid)">加入购物车</van-button>
         </div>
       </template>
    </van-cell>
    <!--商品购买区域结束-->
    <van-button type="primary" size="large">返回</van-button>
  </div>
</template>

<script>
  import request, { getUrl } from "../../utils/request";
  import { showDlg } from "../../utils/tools";
  import {removeStorageToken,getStorageUser,setStorageUser} from "@/utils/storage.js"//导入
   export default{
     data() {
       return{
         goodsid:-1,//前一页传入的商品id
         goods:{//商品对象

         },
         carouselList:[],//轮播图数组
         count:0
       }
     },
     created() {
        this.goodsid=this.$route.query.goodsid//获取前一页面传入的id
        console.log(this.goodsid)
        request({//发起request请求`（获取商品列表）
          url:getUrl("Goods/getGoodsById"),//URL
          method:"get",//请求方法
          params:{//Post传data，get请求传params
            goodsid: this.goodsid
          }
        }).then(res=>{//成功回调
            this.goods=res.data.data//设置商品对象
            this.carouselList=res.data.data.goodsimg//设置商品的轮播图
        }).catch(res=>{//失败回调
          showDlg('错误提醒','网络错误！')
        })
     },
     methods:{
       addToCar:function(goodsid){//加入购物车
         if(this.count>this.goods.cnt){//加入购物车的数量比库存大
           showDlg("错误提示","数量溢出")
           return;
         }
         var that = this;
         request({//加入购物车
           url:getUrl("Goods/addGoodsToCar"),
           method:"post",
           headers: {
                   'Content-Type': 'application/x-www-form-urlencoded'
           },
           data:{
              uid:getStorageUser().id,
              goodsId:that.goods.goodid,
              goodsCnt:that.count
           }
         }).then(res=>{
             showDlg("提示",res.data.msg)
         }).catch(error=>{
             showDlg("错误提示","网络错误")
         })
       }
     }
   }
</script>

</script>
<!-- 样式 -->
<style>
.goods-detail {
  background-color: white;
}

.van-swipe-item {
  text-align: center;
}

.count-buy {
  display: flex;
  flex-direction: row;
  margin: 10px 0px;
  justify-content: flex-end;
  align-items: center;
}

.van-stepper {
  padding: 0px 10px;
}
</style>
